<template>
  <div class="message-proxy-wrap">

    <div class="message-del-box">
      <div class="del-box">
        <img src="../../images/rubbish.png" class="pic"/>
        <span class="del-text" @click="manageDel">删除</span>
      </div>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      class="van-message" :class="{'van-message-close':showManage}"
    >
      <div class="message-item-box" v-for="(item,index) in infoList" :key="index" @click="queryMsgDetail(item.id)">
        <div class="message-item-list">
          <div class="mui-input-row mui-checkbox msg-select" v-show="single">
            <input name="checkbox" type="checkbox" :value="item.id"/>
          </div>
          <div class="message-item-con">
            <div class="message-item-title-box">
              <div class="msg-title-box">
                <span class="msg-title">{{item.informationTitle}}</span>
                <span class="msg-mark" v-show="item.status == 0"></span>
              </div>

              <span class="msg-time">{{item.time | formatMessage}}</span>

            </div>
            <div class="message-item-text">{{item.informationDetails}}</div>
          </div>
        </div>
      </div>
    </van-list>

    <div class="message-opt-btn-box" v-show="showManage">
      <div class="message-opt-btn-title" @click="checkFull">
        <div class="mui-input-row mui-checkbox message-opt-btn-select">
          <input name="checkbox" type="checkbox" ref="msgAll">
        </div>
        <span class="btn-title-all">全选</span>
      </div>


      <span class="message-opt-select-num" v-show="number">已选{{number}}条</span>

      <span class="message-opt-cancel" @click="abrogateMsg">取消选择</span>
      <span class="message-opt-del" @click="delMsg">删除</span>
    </div>

    <v-empty :logo="require('../../images/no_news.png')" title="没有消息记录~" v-if="infoList.length == 0 && !loading"></v-empty>

  </div>
</template>

<script>
  import empty from "../../components/empty";
  import {delBatchMsg, queryMsgList} from "../../axios/api";
  import {formatDate} from "../../config/util";

  export default {
    inject: ['reload'],
    data() {
      return {
        userMark: "",
        showSingle: false,
        number: 0,
        showSelect: false,
        showManage: false,
        single: false,
        page: 1,
        size: 20,
        infoList: [],
        loading: false,
        finished: false,
        flag: true,
        allMsgNum: "",
        status: ""
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
    },
    methods: {
      onLoad() {
        if (!this.timer) {// 异步更新数据
          this.timer = setTimeout(() => {
            this.queryMessageList();
            this.timer = null;
          }, 500)
        }
      },
      manageDel() {//垃圾箱
        this.showSelect = true;
        this.showManage = true;
        this.single = true;
        this.$refs.msgAll.checked = false;
      },
      queryMessageList() {
        let params = {
          "sgin": this.userMark,
          "page": this.page,
          "size": this.size
        };
        queryMsgList(params).then((res) => {
          if (res.code == 0) {
            if (res.data != null && res.data.length > 0) {
              this.infoList = this.infoList.concat(res.data);
              this.selectAll("checkbox", false);
              this.$refs.msgAll.checked = false;
              this.number = "";

              this.loading = false;
              this.page++;
            } else {
              if (this.loading) {
                this.loading = false;
                if (this.infoList.length >= res.data.length) {
                  this.finished = true;
                }
              }
            }
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
        });
      },
      selectAll(className, flag) {//全选/全不选
        let loves = document.getElementsByName(className);
        for (let i = 0; i < loves.length; i++) {
          loves[i].checked = flag;
        }
      },
      singleCheck() {//单选
        let allBox = document.getElementsByName('checkbox');
        let checkBox = this.getCheckBoxRes('checkbox');
        if (checkBox.length == allBox.length - 1) {
          this.$refs.msgAll.checked = true;
          this.status = 1;
        } else {
          this.$refs.msgAll.checked = false;
          this.status = 2;
        }
        this.number = checkBox.length;
      },
      getCheckBoxRes(className) {//选择checkbox
        let rdsObj = document.getElementsByName(className);
        let checkVal = new Array();
        let k = 0;
        for (let i = 0; i < rdsObj.length; i++) {
          if (rdsObj[i].checked) {
            if (rdsObj[i].value != "on") {
              checkVal[k] = parseInt(rdsObj[i].value);
            }
            k++;
          }
        }
        return checkVal;
      },
      checkFull() {
        if (this.flag) {
          this.selectAll('checkbox', true);
          this.flag = false;
          this.status = 1;
          this.number = this.allMsgNum;
        } else {
          this.selectAll('checkbox', false);
          this.flag = true;
          this.status = 2;
          this.number = "";
        }
      },
      abrogateMsg() {//取消
        this.showSelect = false;
        this.showManage = false;
        this.single = false;
        this.number = "";
        this.selectAll('checkbox', false);
        this.flag = true;
      },
      delMsg() {//删除
        let checkList = this.getCheckBoxRes('checkbox');
        if (checkList.length < 1) {
          this.$vux.toast.text("请选择要删除的消息", "middle");
          return;
        }
        this.$vux.loading.show({
          text: '加载中',
        });

        let params = {
          "sgin": this.userMark,
          "status": this.status,//1全部删除 2选中删除
          "infoId": String(checkList)
        };

        delBatchMsg(params).then((res) => {
          this.$vux.loading.hide();
          if (res.code == 0) {
            if (res.data == 1) {
              this.reload();
            } else {
              this.$vux.toast.text("删除失败，请重试", "middle");
            }
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
        });
      },
      queryMsgDetail(id) {//消息详情
        if (!this.showManage) {
          this.$router.push({path: "/messageDetail", query: {"msgId": id}});
        } else {
          this.singleCheck();
        }
      },
    },
    filters: {
      formatMessage(time) {
        return formatDate(new Date(time), 'yyyy-MM-dd');
      },
    },
    components: {
      "v-empty": empty
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";
  @import "../../../static/mui.min.css";

  .message-proxy-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .message-del-box {
      display: flex;
      align-items: center;
      .wh(100%, 0.8rem);
      position: fixed;
      z-index: 100;
      background: @talent-theme-bg-color;
      .del-box {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: 0.32rem;
        .pic {
          .wh(0.427rem, 0.427rem);
        }
        .del-text {
          margin-left: 0.16rem;
          .size-color(0.373rem, rgba(153, 153, 153, 1));
        }
      }
    }
    .van-message {
      position: absolute;
      top: 0.8rem;
      .wh(100%, auto);
      .message-item-box {
        display: flex;
        .wh(100%, 2rem);
        background: #FFF;
        .message-item-list {
          display: flex;
          align-items: center;
          margin-left: 0.32rem;
          border-bottom: 0.027rem solid #f2f2f2;
          .wh(96.8%, 2rem);
          .msg-select {
            display: flex;
            align-items: center;
            margin-right: 0.32rem;
            .wh(0.507rem, 0.507rem);
          }
          .message-item-con {
            width: 100%;
            .message-item-title-box {
              display: flex;
              padding-bottom: 0.32rem;
              .msg-title-box {
                position: relative;
                .msg-title {
                  .size-color-weight(0.427rem, rgba(51, 51, 51, 1), 500);
                }
                .msg-mark {
                  position: absolute;
                  top: -0.1rem;
                  right: -0.5rem;
                  .wh(0.213rem, 0.213rem);
                  background: rgba(255, 83, 83, 1);
                  border-radius: 50%;
                }
              }
              .msg-time {
                margin-left: auto;
                margin-right: 0.32rem;
                .size-color(0.347rem, rgba(153, 153, 153, 1));
              }
            }
            .message-item-text {
              padding-top: 0.1rem;
              padding-bottom: 0.1rem;
              .ellipsis(7.787rem);
              .size-color(0.373rem, rgba(102, 102, 102, 1));
            }
          }
        }
      }
    }
    .van-message-close {
      padding-bottom: 1.32rem;
    }
    .message-opt-btn-box {
      display: flex;
      align-items: center;
      position: fixed;
      bottom: 0;
      .wh(100%, 1.32rem);
      background: rgba(255, 255, 255, 1);
      box-shadow: 0.04rem 0.053rem 0.293rem 0rem rgba(0, 0, 0, 0.1);
      .message-opt-btn-title {
        display: flex;
        align-items: center;
        .message-opt-btn-select {
          display: flex;
          align-items: center;
          margin-left: 0.32rem;
          margin-right: 0.32rem;
          .wh(0.507rem, 0.507rem);
        }
        .btn-title-all {
          margin-right: 0.293rem;
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
      }
      .message-opt-select-num {
        .size-color(0.427rem, rgba(60, 175, 255, 1));
      }
      .message-opt-cancel {
        margin-left: auto;
        margin-right: 0.4rem;
        .size-color(0.373rem, rgba(102, 102, 102, 1));
        border: none;
      }
      .message-opt-del {
        .wh(2.667rem, 1.32rem);
        line-height: 1.32rem;
        text-align: center;
        background: rgba(60, 175, 255, 1);
        .size-color(0.453rem, rgba(255, 255, 255, 1));
        border: none;
      }
    }
  }
</style>
